<template>
	<view class="shop-cate page-bg">
		<view class="index-search">
			<image class="search-icon" src="../../static/common/icon_02.png"></image>
			<text class="search-text" @click="link('/pages/index/search')">请输入关键词进行搜索</text>
		</view>

		<view class="cate-wrap">
			<scroll-view class="scroll-menu" :scroll-y="true">
				<view v-for="item in scrollMenu" :key='item.id' :class="currentMenuIndex===item.id?'menu-item menu-item-active':'menu-item'"
				 @click="setCurrentMenuIndex(item.id)">
					{{item.typeName}}
					<text class="after-line"></text>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="shop-grid" @scrolltolower="loadMone">
				<view v-if="items.length<=0" class="desc no-info">暂时没有相关产品~</view>
				<block v-else>
					<view v-for="item in items" :key='item.id' class="shop-grid__item" @click="link('/pages/shop/shopDetail?id='+item.id)">
						<image class="shop-grid__img" :src="item.imgUrl" mode=""></image>
						<view class="shop-grid__title">{{item.comTitle}}</view>
					</view>
					<view  class="desc no-info">{{text}}</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import {
		apiShop as api
	} from '../../utils/apiShop.js'
	export default {
		data() {
			return {
				currentMenuIndex: 1,
				scrollMenu: [],
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				text: '上拉加载更多~'
			}
		},
		onLoad() {
			this.pageSize = common.pageSize
			this.getScrollMenu()
		},
		methods: {
			setCurrentMenuIndex(index) {
				this.pageIndex = 1
				this.items = []
				this.currentMenuIndex = index
				this.getItems()
			},
			link(url) {
				this.$link(url)
			},
			getScrollMenu() {
				api.getCommodityList({}, (res) => {
					this.scrollMenu = res.items
					this.currentMenuIndex = res.items[0]['id']
					this.getItems(res.items[0]['id'])
				})
			},
			getItems() {
				let {
					currentMenuIndex,
					pageIndex,
					pageSize
				} = this.$data
				api.getCommodityPagesByType({
					typeId: currentMenuIndex,
					pageIndex,
					pageSize
				}, (res) => {
					this.totalCount = res.totalCount
					if (this.pageSize > res.totalCount) {
						this.text = '已经没有更多了~'
					}
					this.items = [...this.items, ...res.items]
				})
			},
			
			loadMone() {
				console.log('滚动到了底部')
				if (this.pageIndex * this.pageSize >= this.totalCount) {
					this.text = '已经没有更多了~'
				} else {
					this.pageIndex++
					this.getItems()
				}
			}
		}/* ,
		onReachBottom() {
			if (this.pageIndex * this.pageSize > this.totalCount) {
				this.text = '已经没有更多了~'
			} else {
				this.pageIndex++
				this.getItems()
			}
		}, */
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.index-search {
		width: 710rpx;
		margin: 20rpx;
	}

	.cate-wrap {
		.flex-base;
		align-items: flex-start;
	}

	.scroll-menu {
		width: 180rpx;
		height: calc(100vh - 188rpx);
		/* #ifndef H5 */
		height: calc(100vh - 88rpx);
		/* #endif */
		background: @f;
		flex-shrink: 0;
		align-items: flex-start;

		.menu-item {
			height: 100rpx;
			.text-overflow;
			.flex-base;
			justify-content: center;
			position: relative;
			width: 100%;

			.after-line {
				width: 0;
				height: 0;
				display: block;
				border-radius: 6upx;
				background: @font-orange-color;
				position: absolute;
				left: 0;
				top: 0;
				right: auto;
				transition: all 0.5s ease-in-out;
			}
		}

		.menu-item-active {
			background-color: @bg-dark-color;
			color: @font-orange-color;

			.after-line {
				width: 4rpx;
				height: 100rpx;
			}
		}
	}

	.shop-grid {
		height: calc(100vh - 188rpx);
		.flex-base;
		flex-direction: row;
		padding-right: 20rpx;
		flex-wrap: wrap;
		justify-content: flex-end;

		.shop-grid__item {
			width: 160rpx;
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			display: inline-block;
		}

		.shop-grid__img {
			width: 160rpx;
			height: 160rpx;
			.br;
			display: block;
			background: @f;
		}

		.shop-grid__title {
			.f24;
			text-align: center;
			.text-overflow;
			margin: 20rpx 0 50rpx 0;
		}
	}
</style>
